import { cn } from "common-web";
import type React from "react";
import theme from "@/common/theme";

export type InputSize = "sm" | "md" | "lg";

type InputProps = Omit<
  React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
  "size"
> & {
  size?: InputSize | undefined;
};

export default function Input({ size, className, ...p }: InputProps) {
  const sizeClass = () => {
    switch (size) {
      case "sm":
        return "px-2 py-1 h-8  text-sm";
      case "lg":
        return "px-4 py-2 h-12 text-lg";
      default:
        return "px-4 py-2 h-10 text-sm";
    }
  };

  return (
    <input
      className={cn(
        "border",
        theme.borderColor,
        theme.borderRadius,
        "hover:outline-2 hover:outline-gray-300",
        "focus:outline-2 focus:outline-gray-300 focus:border-gray-300",
        theme.shadow,
        sizeClass(),
        className,
      )}
      {...p}
    />
  );
}
